<template>
  <div id="app">
    <router-view></router-view>

    <div class="tabbar">
      <router-link to="/student" tag="div">学生列表</router-link>
      <router-link to="/addstudent" tag="div">增加学生</router-link>
      <router-link to="/delstudent" tag="div">删除学生</router-link>
      <router-link to="/querystu" tag="div">查询学生</router-link>
    </div>
  </div>
</template>

<style>
.tabbar {
  display: flex;
  background-color: #f6f6f6;
  justify-content: center;
  height: 49px;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  box-shadow: 0px -1px 1px rgba(100,100,100,.2);
}
.tabbar > div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tabbar > div:not(:last-child) {
  border-right: 1px solid rgba(100,100,100,.2);
}
.tabbar > div.router-link-exact-active {
  background-color: rgb(243, 195, 39);
  color: white;
  font-weight: 800;
}
</style>
